<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>网易严选</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="css/head.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/shopping-pay.css}" href="css/shopping-pay.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/footer.css}" href="css/footer.css"/>
</head>

<body>
<div th:insert="head::topbar"></div>
<div class="container">
    <div class="title">
        <h2>选择付款方式</h2>
    </div>
    <div class="title-infor">
        <span class="number" th:text="'交易号：'+${indent.getIndentId()}"></span>
        <span class="infor-price">实付 :</span>
        <span class="money" th:text="'￥'+${indent.indentPrice}"></span>
    </div>
    <div class="f-margin-bottom">
        <div class="hd">
            <span>支付方式</span>
        </div>
        <div class="bd">
            <div class="m-payMethods">
                <div class="j-payMethod fl">
                    <div class="w-radio fl">
                        <input type="radio" name="payMethod" value="3">
                    </div>
                    <div class="photo fl">
                        <img th:src="@{/img/pic-41.png.png}" />
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="q-payMethod fl">
                    <div class="w-radio fl">
                        <input type="radio" name="payMethod" value="3">
                    </div>
                    <div class="photo fl">
                        <img th:src="@{/img/pic-46.png.jpg}" />
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="q-payMethod fl">
                    <div class="w-radio fl">
                        <input type="radio" name="payMethod" value="3">
                    </div>
                    <div class="photo fl">
                        <img th:src="@{/img/pic-45.png.png}" />
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="q-payMethod fl">
                    <div class="w-radio fl">
                        <input type="radio" name="payMethod" value="3">
                    </div>
                    <div class="photo fl">
                        <img th:src="@{/img/pic-44.png.png}" />
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="q-payMethod fl">
                    <div class="w-radio fl">
                        <input type="radio" name="payMethod" value="3">
                    </div>
                    <div class="photo fl">
                        <img th:src="@{/img/pic-43.png.png}" />
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <ul class="m-bink">
            <div class="df">

            </div>
            <div class="df-1">

            </div>
            <li class="china-bank">
                <img th:src="@{/img/pic-48.png}" />
                <div class="sdx">
                    <img th:src="@{/img/pic-60.png}" />
                </div>
            </li>
            <li class="china-bank"><img th:src="@{/img/pic-47.png}" />
                <div class="sdx">
                    <img th:src="@{/img/pic-60.png}" />
                </div>
            </li>
            <li class="china-bank"><img th:src="@{/img/pic-50.png}" />
                <div class="sdx">
                    <img th:src="@{/img/pic-60.png}" />
                </div>
            </li>
            <li class="china-bank"><img th:src="@{/img/pic-49.png}" />
                <div class="sdx">
                    <img th:src="@{/img/pic-60.png}" />
                </div>
            </li>
            <li class="china-bank"><img th:src="@{/img/pic-51.png}" />
                <div class="sdx">
                    <img th:src="@{/img/pic-60.png}" />
                </div>
            </li>
            <li class="clear"></li>
        </ul>
    </div>
    <div class="foo">
        <div class="foo-title fr">
            <p><button class="xixi">立即付款</button></p>
        </div>
        <div class="clear"></div>
    </div>
    <div class="foo-time">
        <div class="time-item fr">
            <strong id="minute_show">61分</strong>
            <strong id="second_show">00秒</strong>
        </div>
        <div class="time fr">剩余付款时间 :</div>
        <div class="clear"></div>
    </div>
</div>
<div th:replace="footer::#footbar"></div>
<script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">
    $(document).ready(function() {
        //底部侧边栏关闭
        $(".icon-sidebarx").click(function() {
            $(this).parents(".sidebar-b-bac").remove();
        });
        //右边侧边栏关闭
        $(".icon-subx").click(function() {
            $(this).parents(".sub-list").css("display", "none");
        });
        //右边hover弹窗input隐藏出现
        $(".sub-inputbox").click(function() {
            $(this).prev(".icon-inputx").css("opacity", 1);
        });
        //下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
        $(window).scroll(function() {
            var top = $(document).scrollTop();
            if(top > 200) {
                $(".sidebar-r-totop").css({
                    display: 'block'
                });
                $(".navigation-fix").slideDown();
            } else {
                $(".sidebar-r-totop").css({
                    display: 'none'
                });
                $(".navigation-fix").slideUp();
            }
        });
        //点击回到顶部，回到顶部
        $(".sidebar-r-totop").click(function() {
            $("html,body").animate({
                scrollTop: 0
            }, 500);
        });

    })
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".j-payMethod .w-radio input").prop('checked', true);
    });
    /*var i=$(".q-payMethod input").index();*/


    $(".q-payMethod input").click(function() {
        var i = $(this).parents(".q-payMethod").index();
        if(i == 3) {
            $(".m-bink").css("display", "block");
            $(".df").css("display", "block");
            $(".df-1").css("display", "none");
            $(".m-bink li").css({
                border: "0",
                padding: "2px"
            })
            $(".sdx").css({
                display: "none"
            })


        }
        if(i == 4) {
            $(".m-bink").css("display", "block");
            $(".df-1").css("display", "block");
            $(".df").css("display", "none");
            $(".m-bink li").css({
                border: "0",
                padding: "2px"
            })
            $(".sdx").css({
                display: "none"
            })
        }
        if(i==0||i==1||i==2){
            $(".m-bink").css("display","none");

        }
    });
    $(".j-payMethod input").click(function(){
        $(".m-bink").css("display","none");
    })
    //			var $arr=$(".m-bink li");
    /*$(".m-bink li").each(function(){
        $(".foo-title button").click(function(){
            console.log(11)
        })
    })*/
    /*$.each($arr,function(index,foo-title button){
        item.click(function(){
            flag=true;
            break;
        });
        if(flag){
            alert(222)
        }else{
            alert(111)
        }
    })*/

    $(".m-bink li").click(function() {
        $(".m-bink li").css({
            border: "0",
            padding: "2px"
        })
        $(".m-bink li .sdx").css({
            display: "none"
        })
        $(this).css({
            border: "2px solid #b4a078",
            padding: "0"
        })
        $(this).find(".sdx").css({
            display: "block"
        })
    })
    $(".xixi").click(function() {
        var i = $(".q-payMethod").index();
        console.log(i)
    })
</script>
<script type="text/javascript">
    var intDiff = parseInt(59); //倒计时总秒数量
    function timer(intDiff) {
        window.setInterval(function() {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0; //时间默认值
            if(intDiff > 0) {
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if(minute <= 9)
                minute = '6' + minute;
            if(second <= 9)
                second = '0' + second;
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
            intDiff--;
        }, 1000);
    }
    $(function() {
        timer(intDiff);
    });
</script>
<!--<script type="text/javascript">
    var bool=false;
    var $arr=$("li");
    $.each($arr, function(index,item) {
        item.click(function(){
            bool=true;
            break;
        })
        if(bool){
            location.href="s.html";
        }else{

        }
    });
</script>-->
</body>

</html>